import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: root
    width: 200
    height: 100
    border.color: "lightgray"
    border.width: 1
    radius: 10

    property var title: ""
    property var icon: null // 支持：url(string), Item, string(unicode), null
    property var description: ""

    property color normalColor: "#e3f2fd"
    property color hoverColor: "#2196f3"
    property color pressedColor: "#1976d2"
    property color textColor: mouseArea.containsMouse ? "#ffffff" : "#1565c0"
    property alias fontSize: btnText.font.pixelSize

    color: normalColor
    
    signal clicked()

    RowLayout {
        anchors.fill: parent
        anchors.margins: 6
        spacing: 10

        // 图标区域
        Item {
            id: iconHolder
            Layout.minimumWidth: 64
            Layout.preferredHeight: 64
            Item {
                id: itemHolder
                anchors.fill: parent                
                visible: root.icon instanceof Item
                // 当外部传入 Item 时，重新设置父级和位置
                Component.onCompleted: {
                    if (visible && root.icon) {
                        root.icon.parent = itemHolder;
                        root.icon.anchors.fill = itemHolder;
                        console.log("Icon is an Item, reparented and anchored.")
                    }
                }
            }

            Image {
                id: imageHolder
                anchors.fill: parent
                visible: typeof root.icon === "string" && isUrl(root.icon);
                source: visible ? root.icon : ""
                fillMode: Image.PreserveAspectFit
                smooth: true
            }

            Item {
                id: textHolder
                anchors.fill: parent
                visible: typeof root.icon === "string" && !isUrl(root.icon);
                Text {
                    anchors.centerIn: parent
                    text: visible ? root.icon : ""
                    font.pixelSize: 48
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }

        // 标题和描述区域
        Item {
            id: titleHolder
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height
            Layout.alignment: Qt.AlignVCenter

            visible: root.title !== ""
            Text {
                id: btnText
                anchors.centerIn: parent
                text: root.title
                font.pixelSize: 16
                color: root.textColor
                font.family: "Microsoft YaHei"
            }
        }
    }

    // 鼠标区域，用于触发点击事件
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: root.clicked()
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        
    }

    // 状态变化
    states: [
        State {
            name: "HOVERED"
            when: mouseArea.containsMouse && !mouseArea.pressed
            PropertyChanges {
                target: root
                color: hoverColor
                scale: 1.02
            }
        },
        State {
            name: "PRESSED"
            when: mouseArea.pressed
            PropertyChanges {
                target: root
                color: pressedColor
                scale: 0.98
            }
        }
    ]
    
    // 过渡动画
    transitions: [
        Transition {
            from: "*"; to: "*"
            PropertyAnimation {
                properties: "color, scale"
                duration: 150
                easing.type: Easing.OutCubic
            }
        }
    ]

    function isUrl(str) {
        try {
            new URL(str);
            return true;
        } catch (e) {
            return false;
        }
    }
}
